<template>
  <div>
    <home-head/>
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
        <van-grid column-num="3" clickable>
          <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :to="{
            path: '/itemLists',
            query:{
              cateId: cate.id
            }
          }"
          :text="cate.name"/>
        </van-grid>
      <!-- /宫格导航 -->
      <!-- 推荐商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我也是有底线的"
        :offset="50"
        @load="onLoad"
      >
      <home-items
        @clickItem="enterDetail"
        @addCart ="addCart"
       :items="items"/>
      </van-list>
      <!-- /推荐商品 -->
      </van-pull-refresh>
    </div>
    <loading/>
    <tabbar/>
  </div>
</template>

<script>
import { fetchCates, fetchHomeBanner, fetchItems, addCart } from '@api'
// import axios from 'axios'
import Tabbar from '../../components/Tabbar.vue'
import HomeHead from './components/HomeHead.vue'
import HomeItems from './components/HomeItems.vue'
import isLogin from '@utils'
import { Toast } from 'vant'
import loading from '../../plugins/loading/loading.vue'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      // 下拉刷新的loading状态,初始是false
      isLoading: false,
      page: 1, // 商品请求的是哪一页
      pageSize: 5, // 一页多少条
      loading: false, // 是否上拉触底
      finished: false // 是否上拉到达最后一页

    }
  },
  created () {
    this.fetchCates()
    this.fetchBanners()
  },
  methods: {
    addCart (id) {
      // console.log(id)
      // 判断是否登录
      if (isLogin()) {
        // 登录了
        addCart({
          goodsId: id,
          number: 1,
          token: localStorage.getItem('token') || ''
        }).then(res => {
          if (res.data.code === 0) {
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              total: res.data.data.price
            })
            Toast({
              type: 'success',
              duration: 1000,
              message: '加入成功'
            })
          }
        })
      } else {
        // 没有登录
        // console.log(Toast)
        Toast({
          message: '请先登录',
          duration: 1000,
          onClose: () => {
            // 跳转到登录页
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      }
    },
    enterDetail (id) {
      // 需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
      // 获取方式
      this.$router.push(`/detail/${id}`)
    },
    // 上拉触底的事件
    onLoad () {
      // console.log('触底了')
      this.fetchItems()
      // console.log('上拉触底了')
      // 请求下一页的数据
      this.page++
    },
    onRefresh () { // 用户下拉 监听函数
      // console.log('下拉了')
      // 解决刷新后无法再次触发触底状态 进行加载下一页内容 的问题， 上拉加载  请求page 回到1
      // 将page变为1
      this.page = 1
      // 数据清空
      this.items = []
      // 当finished为true的时候，会以为到达了底部页面，所以再次刷新后需要再次手动变为false
      this.finished = false
      this.fetchItems()
      this.page++
    },
    fetchItems () {
      fetchItems({ // 传给后端需要的数据都在这里传参
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => { // res是后端（接口）返回的数据
        // 结束下拉状态，初始值也是false,下拉的那一刻就触发值改为true
        this.isLoading = false
        // 要在数据成功获取后 将触底状态变成false
        // 如果不加上这个loding为false，就会一直处于触底状态中，永远触发不了下一次触底状态，永远加载不了下一页
        this.loading = false
        // 判断是否到达最后一个触底页面
        if (res.data.code === 700) {
          // 如果code等于700，就代表是最后一页，因为加载不了了
          this.finished = true
        }
        // console.log(res)
        if (res.data.code === 0) {
          // 将上一次请求回来的数据跟下拉后请求回来的数据进行整合，放在一起，重新赋值
          this.items = [...this.items, ...res.data.data.result]
        }
      })
    },
    fetchCates () {
      // 获取分类数据
      fetchCates().then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
      // this.$http.get('/shop/goods/category/all').then(res => {
      //   // console.log(res)
      //   if (res.data.code === 0) {
      //     this.cates = res.data.data
      //     console.log(this.cates)
      //   }
      // })
    },
    fetchBanners () {
      // 获取首页轮播
      fetchHomeBanner().then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  components: {
    Tabbar,
    HomeHead,
    HomeItems,
    loading
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding: 50px 0;
  .my-swipe{
    img{
      width: 100%;
    }
  }
}
</style>
